﻿

function showEchartsBar(dom, nameArr, valueArr, text, name) {
    //LinkUpdataCharts(nameArr, valueArr, text, name);
    var myChart = echarts.init(dom);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },

        // title: {
        //     show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
        //     text: name + '柱状图', //主标题文本，'\n'指定换行
        //     x: 'center',
        //     padding: 2,
        //     textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        //         fontFamily: 'Arial, Verdana, sans...',
        //         fontSize: 18,
        //         fontStyle: 'normal',
        //         fontWeight: 'normal',
        //         color: 'white'
        //     },
        // },

        // xAxis: [{
        //     type: 'category',
        //     data: nameArr
        // }],
        // yAxis: [{
        //     type: 'value'  
        // }],
        xAxis: [{
            type: 'category',
            data: nameArr,
            axisLabel: {
                // formatter:'{value}(平方米)',  //给y轴添加单位
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(170,170,170,1)'
                }
            },
            // axisLabel: {
            //     interval: 0,
            //     rotate: 30
            // }
        }],
        yAxis: [{
            type: 'value',
            // name: '单位(亩)',
            axisLabel: {
                formatter: '{value}', //给y轴添加单位                                   
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            }
        }],
        grid: {
            left: '4%',
            right: '4%',
            bottom: '4%',
            top: '10%',
            containLabel: true
        },


        toolbox: {
            show: true,
            x: '93%',
            feature: {
                dataView: { show: false },
                saveAsImage: {
                    show: true,
                    name: name + '柱状图',
                    excludeComponents: ['toolbox'],
                    pixelRatio: 2,
                    backgroundColor: '#2d3041'
                },
                myFull: {
                    show: true,
                    title: '全屏查看',
                    icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                    onclick: function (e) {
                        var opts = e.getOption();
                        opts.toolbox[0].feature.myFull.show = false;
                        //window.top表示最顶层iframe  如果在当页面全屏打开 删去window.top即可
                        window.layer.open({
                            title: false,
                            type: 2,
                            area: ['100%', '100%'],
                            content: '/portal/echarts.html',
                            success: function (layero, index) {
                                var fullchart = echarts.init($("div.layui-layer-content > iframe", layero)[0].contentWindow.document.getElementById('fullChart'))
                                fullchart.setOption(opts)
                            }
                        })
                    }
                }
            },
            iconStyle: {
                normal: {
                    color: 'white', //设置颜色
                }
            }
        },
        series: [{
            data: valueArr,
            name: text,
            type: 'bar',
            itemStyle: {
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'white',
                            fontSize: 12
                        }
                    }
                }
            }
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
        myChart.resize({
            width: myChart._dom.offsetWidth,
            height: myChart._dom.offsetHeight
        });
        window.addEventListener("resize", function () {
            myChart.resize({
                width: myChart._dom.offsetWidth,
                height: myChart._dom.offsetHeight
            });
        });
    }
}
//饼状图
function showEchartsPie(dom, nameArr, valueArr, text, name) {
    var myChart = echarts.init(dom);
    var option = {
        // title: {
        //     text: '某站点用户访问来源',
        //     subtext: '纯属虚构',
        //     left: 'center'
        // },
        // title: {
        //     show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
        //     text: name + '饼状图', //主标题文本，'\n'指定换行
        //     x: 'center',
        //     padding: 2,
        //     textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        //         fontFamily: 'Arial, Verdana, sans...',
        //         //fontSize: 18,
        //         fontStyle: 'normal',
        //         fontWeight: 'normal',
        //         color: 'white'
        //     },
        // },
        legend: {
            orient: 'vertical',
            left: '80%',
            y: 'center',
            data: nameArr,
            textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 16
            }

        },
        grid: {
            left: '4%',
            right: '4%',
            bottom: '4%',
            top: '4%',
            containLabel: true
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left',
        //     data: nameArr
        // },
        toolbox: {
            show: true,
            x: '93%',
            feature: {
                dataView: { show: false },
                saveAsImage: {
                    show: true,
                    name: name + '饼状图',
                    excludeComponents: ['toolbox'],
                    pixelRatio: 2,
                    backgroundColor: '#2d3041'
                },
                myFull: {
                    show: true,
                    title: '全屏查看',
                    icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                    onclick: function (e) {
                        var opts = e.getOption();
                        opts.toolbox[0].feature.myFull.show = false;
                        //window.top表示最顶层iframe  如果在当页面全屏打开 删去window.top即可
                        window.layer.open({
                            title: false,
                            type: 2,
                            area: ['100%', '100%'],
                            content: '/portal/echarts.html',
                            success: function (layero, index) {
                                var fullchart = echarts.init($("div.layui-layer-content > iframe", layero)[0].contentWindow.document.getElementById('fullChart'))
                                fullchart.setOption(opts)
                            }
                        })
                    }
                }
            },
            iconStyle: {
                normal: {
                    color: 'white', //设置颜色
                }
            }
        },
        series: [{
            name: text,
            type: 'pie',
            radius: '60%',
            center: ['50%', '60%'],
            data: valueArr,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]

    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
        myChart.resize({
            width: myChart._dom.offsetWidth,
            height: myChart._dom.offsetHeight
        });
        window.addEventListener("resize", function () {
            myChart.resize({
                width: myChart._dom.offsetWidth,
                height: myChart._dom.offsetHeight
            });
        });
    }
}
//堆叠柱状图
function showEchartsBar2(dom, nameArr, valueArr, text, name) {
    var myChart = echarts.init(dom);
    var option = {
        color: ['#3cb371', '#b8860b', '#30e0e0',
            '#ff7f50', '#87cefa', '#ffa500', '#40e0d0'
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },



        toolbox: {
            show: true,
            x: '93%',
            feature: {
                dataView: { show: false },
                saveAsImage: {
                    show: true,
                    name: name + '柱状图',
                    excludeComponents: ['toolbox'],
                    pixelRatio: 2,
                    backgroundColor: '#2d3041'
                },
                myFull: {
                    show: true,
                    title: '全屏查看',
                    icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                    onclick: function (e) {
                        var opts = e.getOption();
                        opts.toolbox[0].feature.myFull.show = false;
                        //window.top表示最顶层iframe  如果在当页面全屏打开 删去window.top即可
                        window.layer.open({
                            title: false,
                            type: 2,
                            area: ['100%', '100%'],
                            content: '/portal/echarts.html',
                            success: function (layero, index) {
                                var fullchart = echarts.init($("div.layui-layer-content > iframe", layero)[0].contentWindow.document.getElementById('fullChart'))
                                fullchart.setOption(opts)
                            }
                        })
                    }
                }
            },
            iconStyle: {
                normal: {
                    color: 'white', //设置颜色
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: nameArr,
            axisLabel: {
                // formatter:'{value}(平方米)',  //给y轴添加单位
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(170,170,170,1)'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            //name: '单位(亩)',
            axisLabel: {
                formatter: '{value}', //给y轴添加单位                                   
                textStyle: {
                    color: 'white',
                    fontSize: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            }
        }],
        series: valueArr
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
        myChart.resize({
            width: myChart._dom.offsetWidth,
            height: myChart._dom.offsetHeight
        });
        window.addEventListener("resize", function () {
            myChart.resize({
                width: myChart._dom.offsetWidth,
                height: myChart._dom.offsetHeight
            });
        });
    }
}